<template>
  <div>
<h1>v-bind 动态绑定class</h1>
<!-- 对象形式 -->
<div class="box" :class="{box1:flag1 ,box2:flag1}">123</div>
<!-- 数组形式 -->
<div class="box" :class="[flag1&&'box1',flag1&&'box2']">222</div>
<!-- 短路运算符 -->
<div class="box" :class="flag1&&'box1'"></div>
  </div>
</template>

<script>
  export default {
    //数据先行
    data() {
      return {
        flag1:true,
        flag2:false,

      }
    },
  }
</script>

<style lang="scss" scoped>
.box1{
  width: 100px;
  height: 100px;
  background:red;
}
.box2{
  margin: 20px;
  color: aliceblue;
}

</style>